<template>
  <div>
<h1>爷爷组件: {{monkey}} </h1>
  </div>
  <Sons />
  <Son />

</template>

<script>
import Son from './son.vue'
import Sons from './sons.vue'
/**
 * 跨多级组件通信方案：依赖注入
 * 1. 在共享数据的组件中使用：provide('共享数据key'.共享数据data)=》注入
 * 2 在共享数据的组件下额组件：const 接受共享数据=inject('共享数据key')
 */
import { provide, ref } from 'vue'
export default {
  components: {
    Son,
    Sons
  },
  setup () {
    const monkey = ref(1e6)
    provide('rmb', monkey)
    return { monkey }
  }
}
</script>

<style lang="scss" scoped>

</style>
